
// 引入全局组件
import ArticleItem from '../components/ArticleItem.vue'

// 引入时间转换组件
import timeAgo from '../utils/date'

import notify from '../utils/notify'

// 给vue提供自定义的全局组件(插件)
const Component = {

  // 这个install必须有,今后在vue.use()的时候,install函数会被Vue调用，并且自动会把Vue构造函数作为形参传递给install
  install (Vue) {
    /* 拿到了Vue以后,key在这里对Vue左如下扩展
       a) 给Vue的原型添加方法或者属性
       b) 添加全局指令,   Vue.directive()
       c) 添加全局组件,   Vue.component()
       d) 添加全局过滤器, Vue.filter()
    */

    // 全局组件
    Vue.component(ArticleItem.name, ArticleItem)

    // 时间转换
    Vue.prototype.timeAgo = timeAgo

    // 自定义请提示
    Vue.prototype.MyToast = notify

    // 设置自动聚焦ipt方法
    Vue.directive('focus', {
      // 只会触发一次,当指令所在的dom元素第一次插入真实dom中触发
      inserted (el) {
        fn(el)
      },
      // 当指令所在的dom元素发生更新的时候会自动触发
      update (el) {
        fn(el)
      }
    })
  }
}

// 封装的聚焦公共方法
function fn (el) {
  // console.dir(el)
  // console.log(el.localName)
  if (el.localName === 'input' || el.localName === 'textarea') {
    el.focus()
  } else {
    const node = el.querySelector('input')
    if (node) {
      return node.focus()
    }
    const nodes = el.querySelector('textarea')
    if (nodes) {
      return nodes.focus()
    }
    throw new Error('请把foucs指令用在input或textarea标签内')
  }
}

// 导出
export default Component
